<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue学习</title>
	<script src="js/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

</head>
<body>
<div id="app" >
    <mybtn @total="allcounter()"></mybtn>
    <mybtn @total="allcounter()"></mybtn>
    <mybtn @total="allcounter()"></mybtn>
    <mybtn @total="allcounter()"></mybtn>
    <p>一共点击了{{totalcounter}}次</p>
</div> 
<template id="my_btn">
  <button @click="total()">点击了{{counter}}次</button>
</template>

</body>
</html>

<script> 

//注册父组件
Vue.component('mybtn',{
  template:'#my_btn',
  data(){
    return {
      counter:0
    }
  },
  methods:{
    total(){
      this.counter += 1;
      this.$emit('total');
    }
  }
});
 new Vue({
  el: '#app',
  data:{
    totalcounter:0
  },
  methods:{
    allcounter(){
      this.totalcounter += 1;
    }
  }


})
</script>